<template>
  <view>
    <view class="tab-bar">
      <view class="tab-bar-border"></view>
      <view
        v-for="(item, index) in list"
        :key="index"
        class="tab-bar-item"
        @tap="switchTab(item.pagePath, index)"
      >
        <image
          :src="selected == index ? item.selectedIconPath : item.iconPath"
        ></image>
        <view
          :style="
            selected == index ? 'color:' + selectedColor : 'color:' + color
          "
          >{{ item.text }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    // 定义 props 属性，用来接收外界传递到当前组件的数据
    props: {
      // 父级传递过来对象
      selected: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        index: 0,
        color: '#979797',
        selectedColor: '#0C89FB',
        list: [
          {
            pagePath: '/controlpkg/index/index',
            text: '主页',
            iconPath:
              'https://mkservice.mk-iot.com/subFile/mk2240/homepage_notbright.png',
            selectedIconPath:
              'https://mkservice.mk-iot.com/subFile/mk2240/homepage_bright.png',
          },
          {
            pagePath: '/controlpkg/reservation/index',
            text: '预约',
            iconPath:
              'https://mkservice.mk-iot.com/subFile/mk2240/order_notbright.png',
            selectedIconPath:
              'https://mkservice.mk-iot.com/subFile/mk2240/order_bright.png',
          },
          {
            pagePath: '/controlpkg/system/index',
            text: '系统',
            iconPath:
              'https://mkservice.mk-iot.com/subFile/mk2240/systemicon_notbright.png',
            selectedIconPath:
              'https://mkservice.mk-iot.com/subFile/mk2240/system_bright.png',
          },
        ],
      }
    },
    methods: {
      switchTab(path, index) {
        uni.redirectTo({
          url: path,
        })
      },
    },
  }
</script>

<style>
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55px;
    background: white;
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
  }

  .tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .tab-bar-item image {
    width: 25px;
    height: 25px;
  }

  .tab-bar-item view {
    font-size: 10px;
    margin-top: 10rpx;
  }
</style>
